<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
  <title>Document</title>
</head>

<body>
  <div id="app">

    <p v-for="item in dataShow" :key="item.id">{{item.id}}---{{item.name}}---{{item.age}}</p>

    <input type="button" value="上一页" @click="prePage">
    <span v-for="i in pageNum" @click="page(i)" :style="{cursor: 'pointer', margin:'10px'}">{{ i
      }}</span>
    <input type="button" value="下一页" @click="nextPage">

  </div>

  <script>

    var vm = new Vue({
      el: '#app',
      data: {
        data: [ //模拟数据
          { id: 1, name: '小明', age: 12 },
          { id: 2, name: '小王', age: 12 },
          { id: 3, name: '小李', age: 12 },
          { id: 4, name: '小赵', age: 12 },
          { id: 5, name: '小黄', age: 12 },
          { id: 6, name: '小刘', age: 12 },
          { id: 7, name: '小张', age: 12 }
        ],
        totalPage: [], // 所有分页的数据
        pageSize: 2, // 每页显示数量
        pageNum: 1,  // 共几页=所有数据/每页现实数量     
        dataShow: [], // 当前显示的数据  
        currentPage: 0 // 默认当前显示第一页
      },
      created() {
        this.pageNum = Math.ceil(this.data.length / this.pageSize) || 1;//计算有多少页数据，默认为1

        // 循环页面
        for (let i = 0; i < this.pageNum; i++) {
          // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
          // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为2， 则第一页是1-2条，即slice(0,2)，第二页是3-4条，即slice(3,4)以此类推
          this.totalPage[i] = this.data.slice(this.pageSize * i, this.pageSize * (i + 1))
        }

        // 获取到数据后默认显示第一页内容
        this.dataShow = this.totalPage[this.currentPage];

      },
      methods: {
        // 下一页
        nextPage() {
          if (this.currentPage === this.pageNum - 1) return;
          this.dataShow = this.totalPage[++this.currentPage];
        },
        // 上一页
        prePage() {
          if (this.currentPage === 0) return;
          this.dataShow = this.totalPage[--this.currentPage];
        },
        // 点击页码
        page(i) {
          this.currentPage = i
          this.dataShow = this.totalPage[i - 1];
        }

      }
    })

  </script>
</body>

</html>